<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 错误的：v-model只能与表单元素一起使用 -->
         <!-- <h1 v-model="a">数据双向绑定一般用于表单元素</h1> -->
         <p>
             文本框： <input type="text" v-model="b">
         </p>
         <p>
             单选按钮:收集的是value数值并非旁边的文字
             <input type="radio" name="hobby" value="eat" v-model="c"> 吃饭
             <input type="radio" name="hobby" value="sleep" v-model="c"> 睡觉
             <input type="radio" name="hobby" value="beat" v-model="c"> 打豆豆
         </p>
         <p>
            复选框:比较特殊，在收集数据的时候，务必用数组收集
            <input type="checkbox" value="red" v-model="d">红色
            <input type="checkbox" value="yellow" v-model="d">黄色
            <input type="checkbox" value="blue" v-model="d">蓝色
         </p>
         <p>
             下拉框:收集数据的时候v-model给select身上加上
             <select v-model="e">
                 <!-- 收集的是option的value -->
                  <option value="js">JavaScript</option>
                  <option value="oc">Object-c</option>
                  <option value="java">java</option>
             </select>
         </p>
         <p>
             rang范围条:min范围条最小数值  max范围条最大的数值
             <input type="range" min="0" max="100" v-model="f"><span>{{f}}</span>
         </p>
    </div>
</body>
</html>
<script>
    // //创建VM实例
    //需要注意：复选框需要利用数组收集数据，因为收集的数据很多
    let VM = new Vue({
         el:'#app',
         data:{
             a:"非表单元素",
             b:'美国想让石油降价',
             c:'eat',
             d:['blue'],
             e:'',
             f:0
         }
    })

</script>

